<template>
    <view class="live--box">
		<!-- :controls="false" -->
<!-- 		<video
		    v-if="id < 5"
			:src="videoUrl[index]"
			ref="videoPlayer"
			id="videoPlayer"
			loop
			autoplay
			:is-live="true"
			:show-progress="false"
			:enable-progress-gesture="false"
			:http-cache="false"
			x5-video-palyer-type="h5"
			x5-video-palyer-fullscreen="true"
			poster=""
			type="application/x-mpegURL"
			class="live-video"
			@ended="error"
		></video> -->	 
		
		 <!-- #ifdef MP-WEIXIN -->
		 <view class="live-item-top">
		 	<view class="time-item" v-if="isShowAirtime && airtime >= 0">
		 		<view>开播倒计时</view>
		 		<u-count-down :timestamp="airtime" separator-size="26" color="#f50" :height="30" @end="handleEnd"></u-count-down>
		 	</view>
			<video
			    v-else
				:src="url"
				ref="videoPlayer"
				id="videoPlayer"
				loop
				autoplay
				:is-live="true"
				:show-progress="false"
				:enable-progress-gesture="false"
				:http-cache="false"
				x5-video-palyer-type="h5"
				x5-video-palyer-fullscreen="true"
				poster=""
				type="application/x-mpegURL"
				class="live-video"
				@ended="error"
			></video>
		 </view>

		<!-- #endif -->
	    <!-- #ifdef APP-PLUS -->
	  	<view class="live-item-top">
			<view class="time-item" v-if="isShowAirtime && airtime >= 0">
				<view>开播倒计时</view>
				<u-count-down :timestamp="airtime" separator-size="26" color="#f50" :height="30" @end="handleEnd"></u-count-down>
			</view>
			<view v-else>
			    <web-view :src="playerUrl" :update-title="false" class="webView-box" :fullscreen="false" :webview-styles="{'width': '100%','height': '260px','marginTop': '70px'}"></web-view>
            </view>
		</view>
		<!-- #endif -->
	    <!-- #ifdef H5 -->
		<view class="live-item-top">
			<view class="time-item" v-if="isShowAirtime && airtime >= 0">
				<view>开播倒计时</view>
				<u-count-down :timestamp="airtime" separator-size="26" color="#f50" :height="30" @end="handleEnd"></u-count-down>
			</view>
			<view v-else>
				<web-view :src="playerUrl" :update-title="false" class="webView-box" allow="(src 'https://player.xueqianban.vip/live/')" :fullscreen="false" style="width: 100%;height: 31vh;border:none !important" :webview-styles="{'width': '100%','height': '31vh','marginTop': '70px'}"></web-view>
			</view>
		</view>
	    <!-- #endif -->
	<!-- 	<live-player
		      :src="url"
		      mode="live"
		      autoplay
		      style="width:100%;height:50vh"
		    ></live-player> -->
		
		<!-- 自定义底部区域 -->
		<!-- <cover-view class="bottom-ui">
		  <cover-view class="progress-box">
		    <u-slider
		      :value="currentPercent"
		      :min="0"
		      :max="100"
		      @end="onSlider"
		    />
		  </cover-view>
		  <cover-view class="btn-group">
			  <view style="display: flex;">	
			     <u-icon name="play-right-fill" v-if="!isPlay" @click="togglePlay()"></u-icon>
				 <u-icon name="pause" v-else @click="togglePause()"></u-icon>
			     <cover-view>直播</cover-view> 
			 </view>
		  </cover-view>
		</cover-view> -->
		<!-- <live-player
			id="livePlayer" 
			ref="livePlayer" 
			class="live-player" 
			@statechange="statechange"
			@error="error"
			:src="url">
		</live-player> -->
	</view>
</template>

<script>

  // import TCPlayer from '@/common/TcPlayer-2.4.1.js'
  // import { TXLivePusher } from '@/common/TXLivePusher-1.0.0.min.js'
   //#ifdef H5
   // import TCPlayer from 'tcplayer.js';
   // import 'tcplayer.js/dist/tcplayer.min.css';
   // import 'tcplayer.js/dist/libs/flv.min.1.6.3.js';
   
  // import DPlayer from 'dplayer';
  // import 'mui-player/dist/mui-player.min.css'
  // import MuiPlayer from 'mui-player'
  //#endif
  export default {
	props: {
	    url: {
	      type: String,
	      default: ''
	    },
		id:{
			type: Number || String,
			default: ''
		},
		isCloseWebView: {
			type: Boolean,
			default:false
		},
		status_at: {
			type: Number || String,
			default: 0
		}
	},
    data() {
      return {
		player: [],
		sourceUrl: 'http://player.xueqianban.vip/live-test/5454854.flv', //播放路径
		videoContext: null,
		videoUrl: [
			'https://video.shipin520.com/videos/files/default/20230422/20/52/01/da032449a297193c9cc4acac01949e18_v1.mp4',
			'https://video.shipin520.com/videos/06/00/32/a_jYQJQk1MYYc61649060032_v1.mp4',
			'https://video.shipin520.com/videos/44/03/93/b_xS3A6uvppQa31617440393_v1.mp4',
			'https://video.shipin520.com/videos/files/default/20240114/15/18/08/d68c6796108ffd6cae52a0807542b12a_v1.mp4'
		],
		index: 0,
		// 播放状态
		isPlay: true,
		currentPercent: 0,
		airtime: -1, // 倒计时间
		isShowAirtime: true // 是否显示倒计时间
	  }
    },
	watch: {
		id:{
			handler(newVal) {
				// this.index = Math.floor(Math.random() * 4)
			},
			deep:true
		},
		url: {
			handler(newVal) {
				console.log('url', newVal)
				if(newVal && this.airtime <= 0) {
					this.isShowAirtime = false
					//#ifdef H5
					// const dp = new DPlayer({
					//     container: document.getElementById('dplayer'),
					// 	live: true,
					//     video: {
					//         url: newVal,
					// 		autoplay: true,
					// 		type: 'flv'
					//     },
					// });
					 //   // 获取挂载点
						// const mountPoint = document.getElementById('video-mount-point');
						// if (!mountPoint) return;
				  
						// // 创建原生video元素
						// const video = document.createElement('video');
						
						// // 设置属性
						// video.src = newVal;
						// // 设置id属性
						// video.id = 'player';
						// video.controls = true; // 显示默认控制栏
						// video.width = '200';
						// video.height = '300';
						// video.playsInline = true; // 避免iOS全屏播放
						// video.webkitPlaysInline = true; // Safari兼容
						
						// // 添加到挂载点
						// mountPoint.appendChild(video);
						// var player = TCPlayer('player', {
						//     sources: [{
						//       src: newVal, // 播放地址
						//     }],
						// 	createVideo: true,
						// 	autoplay: true,
						// 	poster: '', // 封面图
						//     licenseUrl: 'license/url', // license 地址，参考准备工作部分，在视立方控制台申请 license 后可获得 licenseUrl
						// });
						
						// // 监听事件（可选）
						// video.addEventListener('play', () => {
						//   console.log('原生video开始播放');
						// });
						
						// video.addEventListener('error', (err) => {
						//   console.error('原生video错误:', err);
						// });
					//#endif
				}

				//#ifdef APP-PLUS
				// var mp = new MuiPlayer({
				//     container:'#mui-player',
				//     title:'标题',
				//     live: true,
				//     src:'https://video.shipin520.com/videos/files/default/20230422/20/52/01/da032449a297193c9cc4acac01949e18_v1.mp4',
				// })
				//#endif
				// #ifdef MP-WEIXIN
					
				// #endif
			},
			deep:true
		},
		isCloseWebView:{
			handler(newVal) {
				//#ifdef APP-PLUS
				const type = uni.getSystemInfoSync().uniPlatform;  
				console.log('type2222222', type)
				if (type == 'app' && newVal == true) {  
					//放开右侧按钮  
					/* 获取屏幕信息 */  
					//手机端关闭所有webview页面  
					let webView = this.$scope.$getAppWebview();
					console.log('webView', webView)
					webView.close()
					this.$emit('onBackfun',{isCloseWebView: false})
				} 
				//#endif
			},
			deep:true
		},
		status_at: {
			handler(newVal) {
				console.log('newVal2222222', newVal)
				if(newVal){
					this.isShowAirtime = true
					this.airtime = this.get_air_time(newVal)
				}
			},
			deep:true,
			immediate:true
		}
	},
     computed:{
		playerUrl() {
			//#ifdef APP-PLUS
			return `/static/html/tcplayer.html?url=${encodeURIComponent(this.url)}`
			//#endif
			// #ifdef H5
			return `/static/html/dplayer.html?url=${encodeURIComponent(this.url)}`
			// #endif
			// return 	`/static/tcplayer.html?url=${encodeURIComponent("https://player.xueqianban.vip/live/e577495d-8d78-482e-acff-d21225854867.flv?txSecret=50f8a5a80fb58a17d542de0324b6ff9e&txTime=688736C1")}`
		}
	 },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
		this.videoContext = uni.createVideoContext('videoPlayer');//创建视频实例指向video
        this.videoContext.play();  // 播放
    },
	mounted() {
		this.videoContext = uni.createVideoContext('videoPlayer')
		console.log('videoContext',this.videoContext)
	},
	onReady() {
		
	},
    methods: {
		togglePlay() {
			this.isPlay = true;
			this.videoContext = uni.createVideoContext('videoPlayer', this)
			this.videoContext.pause()
			console.log(this.videoContext)
		},
		togglePause() {
			this.isPlay = false;
			this.videoContext = uni.createVideoContext('videoPlayer', this)
			this.videoContext.play()
		},
		onSlider(){
			
		},
		statechange(e){
			console.log('live-player code:', e.detail.code)
		},
		error(e){
			console.error('live-player error:', e, this.$refs.videoPlayer)
			this.$emit('backError')
		},
		  // 判断开播时间
		  get_air_time(val) {
		  	const date = new Date().getTime();
		  	if(val && val != '') {
		  		let time = val * 1000 - date
		  		console.log(time,date)
		  		return time
		  	} else {
		  		return 0
		  	}
		  },
		  // 倒计时结束事件
		  handleEnd() {
			  console.log('倒计时结束')
			  const app = this
			  setTimeout(() =>{
				  app.isShowAirtime = false
				  app.$emit('backRefresh', app.airtime)
			  }, 5000)
		  }
    }
  }
</script>

<style lang="scss" scoped>
 .live-video{
   width: 100%;
   height: 35vh;
   object-fit: cover; /* 确保视频撑满父容器 */
   // border-radius: 10rpx;
 }
 .live-player{
	 width: 100%;
	 height: 35vh;
	 object-fit: cover; /* 确保视频撑满父容器 */
	 border-radius: 10rpx;
 }
 .live-item-top{
	 position: relative;
	 .time-item{
		 background-color: rgba(0,0,0,0.95);
		 // position: absolute;
		 // top: 0;
		 // left: 0;
		 width:100%;
		 height: 31vh;
		 text-align: center;
		 color:  #f50;
		 padding-top: 160rpx;
		 line-height: 48rpx;
		 font-size: 32rpx;
	 }
 }
</style>